<template>
    <admin-container :title="title">
        <k-table :load="onLoad" v-show="routeName === 'AclUsers'">
            <el-table-column prop="id" label="ID"/>

            <el-table-column label="头像" width="80">
                <template v-slot="{ row }">
                    <el-image class="ke-avatar" :src="row.avatar"/>
                </template>
            </el-table-column>

            <el-table-column prop="nickname" label="显示名称"/>

            <el-table-column prop="username" label="账号"/>

            <el-table-column prop="phone" label="手机号码"/>

            <el-table-column prop="create_time" label="创建时间"/>

            <el-table-column label="操作">
                <template v-slot="scope">
                    <k-table-actions @command="onCommand($event, scope)">
                        <k-table-action-item command="edit" label="编辑"/>

                        <k-table-action-item command="delete" label="删除"/>
                    </k-table-actions>
                </template>
            </el-table-column>
        </k-table>

        <router-view/>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import { getSuperUsers } from '@/services/auth/user.service';
import KTableActions from '@/components/table-actions/index.vue';
import KTableActionItem from '@/components/table-actions/item.vue';
import KTable from '@/components/table/index.vue';

@Component({
    components: {
        KTable,
        KTableActionItem,
        KTableActions,
        AdminContainer,
    },
    provide() {
        return {
            root: this,
        };
    }
})
export default class SystemAclUsers extends Vue {
    form: any = {};

    get routeName(): string {
        return this.$route.name as string;
    }

    get title(): string | null {
        if (this.routeName === 'AclUsers') {
            return null;
        }
        return this.$route.query.id ? '编辑管理信息' : '添加管理';
    }

    mounted() {
        console.log('index data');
    }

    onLoad(state: any) {
        return getSuperUsers({
            ...state,
        })
            .then(result => {
                return result.data;
            })
    }

    onCommand(command: string, { row }: { row: any }) {
        if (command === 'edit') {
            this.$router.push({
                name: 'AclUsersEdit',
                query: { id: row.id }
            });
        }

    }
}
</script>
